<script setup lang="ts">
import { ref } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import { passwordFormOptions } from './config'
import useStore from '@/stores'
import BasePageLayout from '@/layouts/BasePageLayout.vue'

const { user } = useStore()

const form = ref()
async function validateCheckPassword(_rule: any, value: string) {
  if (value === '')
    return Promise.reject('Please enter the password again')

  if (value !== form.value.model.newPassword)
    return Promise.reject('Two inputs don\'t match!')

  return Promise.resolve(true)
}
const FormOptions = passwordFormOptions.map((item: any) => {
  if (item.prop === 'checkPassword')
    item.rules[0].validator = validateCheckPassword

  return item
})
</script>

<template>
  <BasePageLayout class="password-wrapper">
    <template #content>
      <div class="password-layout">
        <div class="user-info">
          <a-avatar :size="84">
            <template #icon>
              <UserOutlined />
            </template>
          </a-avatar>
          <span class="name">{{ user.userInfo?.username }}</span>
          <ul class="info-list">
            <li>
              <span class="title">FullName:</span>
              <span>{{ user.userInfo?.username }}</span>
            </li>
            <li>
              <span class="title">User Role:</span>
              <span>{{ user.userInfo?.roles }}</span>
            </li>
            <li>
              <span class="title">User Email:</span>
              <span>{{ user.userInfo?.email }}</span>
            </li>
          </ul>
        </div>
        <gp-form
          ref="form"
          class="password-form-wrapper"
          :options="FormOptions"
          layout="vertical"
          showfooter="true"
        >
          <template #footerAction>
            <div class="gp__flex-start">
              <a-button type="primary">
                Submit
              </a-button>
              <a-button @click="() => form.resetFields()">
                Reset
              </a-button>
            </div>
          </template>
        </gp-form>
      </div>
    </template>
  </BasePageLayout>
</template>

<style lang="less" scoped>
.password-wrapper {
  ::v-deep(.ant-layout-content) {
    background: transparent !important;
    .password-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      column-gap: 20px;
      height: 100%
    }
  }
  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
    background: #fff;
    padding: 20px;
    font-family: 'Web_Regular';
    font-size: 16px;
    .info-list {
      width: 100%;
      border-bottom: 1px solid #c3c3c3;
      li {
        line-height: 40px;
        color: #666;
        display:flex;
        .title {
          width: 100px;
          text-align: right;
          color: #333;
          margin-right: 30px;
        }
      }
    }
  }
  .password-form-wrapper {
    padding: 20px 20px;
    background: #fff;
  }
}
</style>
